//菜单搜索按钮点击事件
var close = document.getElementsByClassName('close')[0]
var menuSearch = document.getElementsByClassName('menuSearch')[0]
//搜索按钮
var menuSearchBtn = document.getElementsByClassName('menu-search-btn')[0]
//搜索框
var menuSearchInp = document.getElementsByClassName('menuSearch-inp')[0]
//搜索图标
var menuSearchImg = document.getElementsByClassName('menuSearch-img')[0]
close.onclick = function () {
	menuSearch.style.display = 'none'
}
menuSearchBtn.onclick = function(){
	menuSearch.style.display = 'block'
}

$(function(){
	$('.search-result').css('display','none')
	$('.menuSearch-inp').keydown(function(e){
		if(e.keyCode == 13){
			//显示搜索结果
			$('.search-result').css('display','block')
			//取消大家都在搜
			$('.all-menuSearch').css('display','none')
			//清空之前搜索结果
			$('.search-result ul').html('')
			//发送ajax请求到menuSearch路由后传值给页面
			$.ajax({
				method:'get',
				url:'/menuSearch',
				data:{
					val:$('.menuSearch-inp').val()
				},
				success:function(data){
					console.log(data);
					console.log($('.search-result ul'));
					data.forEach(function(i,index){
						
						let content = `
							<li class="col-lg-3">
								<img src="../${i.imgSrc}" alt="">
								<p class="mt-3">${i.name}</p>
							</li>
						`
						$('.search-result ul').append(content)
					})
				},
				fail:function(){

				}
			})
		}
	})

})
